<template>
  <div class="class">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="coverPhoto" label="封面" width="180">
        <template slot-scope="scope">
          <div class="cover-photo">
            <img :src="baseUrl+scope.row.coverPhoto||'../img/gan.png'" alt="封面">
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="标题" width="180">
        <template slot-scope="scope">
          <router-link :to="{name:'play',query:{id:scope.row.id}}">
            {{scope.row.title}}
          </router-link>
        </template>
      </el-table-column>
      <el-table-column prop="uploadTime" label="投稿时间" width="180"></el-table-column>
      <el-table-column prop="checkState" label="状态">
        <template slot-scope="scope">
          <div>{{checkState[scope.row.checkState]}}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
     <div class="pagination">
         <ElPagination :total="totalRow" :current-page.sync="pageNumber" :page-size="8" background ></ElPagination>
     </div>
  </div>
</template>

<script>
export default {
  name: "my-tg-gl",
  data: function() {
    return {
      tableData: [],
      checkState: ["未审核", "通过", "不通过"],
      pageNumber:1,
      pageSize:8,
      totalRow:0,
      baseUrl:this.GLOBAL.baseFilePath
    };
  },
  methods: {
    getMyVideo() {
      this.axios
        .post("video/getMyVideo", {
          id: this.$store.state.user.id,
          pageNumber:this.pageNumber,
          pageSize:this.pageSize
        })
        .then(res => {
          this.tableData = res.data.page.list;
          this.totalRow = res.data.page.totalRow
        });
    },
    handleDelete(index, obj) {
      this.$confirm("此操作将永久删除视频, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.axios
            .post("video/delVideo", {
              videoId: obj.id,
              userId: this.$store.state.user.id
            })
            .then(res => {
              if (res.data.success) {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
                this.tableData.splice(index, 1);
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  },
  mounted: function() {
    this.getMyVideo();
  },
  watch: {
    pageNumber:function(){
      this.getMyVideo();
    }
  },
};
</script>

<style lang="scss" scoped>
.cover-photo {
  height: 45px;
  width: 80px;
}
img {
  height: 100%;
  width: 100%;
}
.pagination{
    margin-top:20px;
}
</style>